<template>
  <div class="v-simulation-scene">
    <div class="scenes">
      <scene-tree :treeData="sceneTreeData"></scene-tree>
    </div>

    <m-expand-box v-if="sceneService.showTriggerBox && toolbarService.signalList.length > 0"
                  class="body-left-sider"
                  :init-size="174"
                  :min-size="174"
                  :max-size="300"
                  placement="left"
                  contentClass="trigger-box">
      <div
        v-for="item in toolbarService.signalList"
        :key="item.id"
        class="trigger-item"
      >
        <span>{{ $t(item.name) }}</span>
        <text-button class="trigger-btn" @click="() => onClick(item)">{{ $t("触发") }}</text-button>
      </div>
    </m-expand-box>
  </div>
</template>
<script lang="ts" setup>
import { computed } from "vue";

import { controller } from "@/engine/Controller";
import { SignalType } from "@/engine/_";
import TextButton from "@/components/TextButton/TextButton.vue";
import MExpandBox from "@/common/ExpandableBox.vue";

import SceneTree from "./SceneTree.vue";

const sceneService = controller.sceneService;
const toolbarService = controller.toolbarService;

const sceneTreeData = computed(() => controller.sceneService.sceneTreeData);

const onClick = (item: SignalType) => {
  controller.toolbarService.signalEmit(String(item.id));
};
</script>
<style lang="scss">
.v-simulation-scene {
  display: flex;
  flex-direction: row;
  height: 100%;
  box-sizing: border-box;

  .scenes {
    flex: 1;
    height: 100%;
    padding: 9px 16px;
    box-sizing: border-box;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #C8D1DE;
    }
  }

  .trigger-box {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    width: 169px;
    overflow-y: auto;
    background: #F5F6F7;
    box-shadow: inset 1px 0px 0px 0px #E0E0E0;
    padding: 5px;

    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #C8D1DE;
    }

    .trigger-item {
      flex: 0 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 28px;
      border: 1px solid #b2bece;
      padding: 6px 10px;
      box-sizing: border-box;
      gap: 10px;
      
    }
  }
}
</style>
